<template>
	<div class="server-num">
		<div class="header">
			<div class=""></div>
			<h3 class="title">选择宝店专属的宝店客</h3>
		</div>
		<div class="h-desc">
			平台会根据你宝店在平台的经营业绩给予宝店客现金奖励，鼓励宝店客为您的宝店进行社会化推广
		</div>
		<div class="search">
			<div class="search-ipt">
				<input type="number" maxlength="10" v-model="keyword" placeholder="请填写宝店客账号"/>
			</div>
			<div class="search-btn" :class="{'no-key':keyword}" @click="searchServer">
				查询
			</div>
		</div>
		<h3 class="con-title" v-show="!serverInfo">
			宝店客给宝店带来的收益
			<div class="triangle_border_down">
			    <span></span>
			</div>
		</h3>
		<h3 class="con-title" v-show="serverInfo">
			宝店客信息详情
			<div class="triangle_border_down">
			    <span></span>
			</div>
		</h3>
		<div class="content">
			<div v-show="hasServerNum">
				<div class="user-info">
					<div class="avatar">
						<img :src="serverInfo.head_pic" width="100%" />
					</div>
					<div class="info">
						<h3 class="name">{{serverInfo.uname}}({{serverInfo.uid}})</h3>
						<p class="desc">{{serverInfo.introduce}}</p>
					</div>
					<router-link tag="div" to="/goContact" class="contact-btn">
						<span class="iconfont">&#xe690;</span>
						联系Ta
					</router-link>
				</div>
				<h3 class="desc-title">
					给宝店带来的收益
				</h3>
				<div>
					<div class="item-info vux-1px-b">
						<div class="image">
							<img src="../../assets/images/coinShop/1a.png" width="100%" />
						</div>
						<div class="info">
							<h3 class="name">最大化传播推广关联宝店</h3>
							<p class="desc">粉丝：{{serverInfo.fans_count}}</p>
						</div>
					</div>
					<div class="item-info vux-1px-b">
						<div class="image">
							<img src="../../assets/images/coinShop/2a.png" width="100%" />
						</div>
						<div class="info">
							<h3 class="name">让关联宝店有更多会员消费</h3>
							<p class="desc">给宝店带来会员：{{serverInfo.invite_count}}</p>
						</div>
					</div>
					<div class="item-info vux-1px-b" v-for="item in rivilege" v-show="rivilege.length">
						<div class="image">
							<img :src="item.icon_path" width="100%" />
						</div>
						<div class="info">
							<h3 class="name">{{item.subTitle}}</h3>
							<p class="desc">{{item.description}}</p>
							<p class="desc">{{item.timeNotice}}</p>
						</div>
					</div>
				</div>
			</div>	
			<!--  第一部分 -->
			<div v-show="!hasServerNum">
				<div class="item-info">
					<div class="image-one">
						<img src="../../assets/images/coinShop/1(1).png" width="100%" />
					</div>
					<div class="info">
						<h3 class="name">最大化传播推广你的宝店</h3>
						<p class="desc">宝店客使用自己的社会关系及渠道推广宝店</p>
					</div>
				</div>
				<div class="item-info">
					<div class="image-one">
						<img src="../../assets/images/coinShop/2(1).png" width="100%" />
					</div>
					<div class="info">
						<h3 class="name">让你的宝店有更多会员消费</h3>
						<p class="desc">宝店客的宝友全部自动成为你的宝店会员/消费</p>
					</div>
				</div>
				<div class="item-info">
					<div class="image-one">
						<img src="../../assets/images/coinShop/3(1).png" width="100%" />
					</div>
					<div class="info">
						<h3 class="name">让你的宝店立获￥3000元推广现金</h3>
						<p class="desc">仅部分宝店客有此特权</p>
					</div>
				</div>
				<div class="item-info">
					<div class="image-one">
						<img src="../../assets/images/coinShop/4(1).png" width="100%" />
					</div>
					<div class="info">
						<h3 class="name">每次使用开奖宝店券，多获5%推广现金</h3>
						<p class="desc">仅部分宝店客有此特权</p>
					</div>
				</div>
			</div>	
		</div>
		<div style="height: 1.2rem;background: #f2f2f2;"></div>
		<div class="footer" v-show="hasServerNum">
			<div class="item vux-1px-r" @click="submitVal(1)">跳过</div>
			<div class="item item2" @click="submitVal(0)">提交</div>
		</div>
		<div class="footer" v-show="!hasServerNum">
			<div class="item" @click="submitVal(1)">跳过此步 <span class="iconfont" style="font-size: .24rem;">&#xe62d;</span></div>
		</div>
		<div class="no-num" v-show="hasNum">
			<img class="no-icon" src="../../assets/images/coinShop/5.png" width="100%"/>
			<span class="no-desc">
				{{this.noNum}}
			</span>
			
		</div>
	</div>
</template>

<script>
	import { getUrlParam }  from '@/assets/js/getUrlParam'
	//import { iosOrAndr }  from '@/assets/js/isIos'
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	export default{
		name : 'queryServerNum',
		data(){
			return{
				title      : '',
				isWeiXin   : '',
				hasNum     : false,
				noNum      : '',
				serverInfo : '',
				keyword    : '',
				fuid       : '',
				hasServerNum : false,
				rivilege     : []
			}
		},
		mounted(){
			this.isWeChat()
			this.from = this.$route.query.fromin
			this.info = JSON.parse(sessionStorage.getItem('shopInfo'))
		},
		methods:{
			//点击搜索按钮
			searchServer(){
				let info = {
					userinfo : {
						uid   : getUrlParam('uid')   || getCookie('uid'),
						token : getUrlParam('token') || getCookie('token')
					},
					bdk_uid   : this.keyword
				}
				this.$vux.loading.show({
        			text: '正在搜索'
      			})
				this.$axiosPost('/api/store/showStoreOwner',{
					data : JSON.stringify(info)
				}).then( res => {
					this.$vux.loading.hide()
					if(res && res.code !== 404){
						this.serverInfo = res
						this.hasServerNum = true
						this.title = ''
						localStorage.setItem('contact',JSON.stringify(this.serverInfo))
						this.fuid = this.keyword
						this.hasServer = true						
						this.lookPrivilege(info.bdk_uid)
					}
					if(res.code === 404){
						this.hasServer = false
						this.hasNum    = true
						this.noNum = res.msg || '账号不存在，请输入正确的账号'
						setTimeout( () => {
							this.hasNum    = false
						},2000)
					}
				})

			},
			//查看特权
			lookPrivilege(id){
				this.$axiosGet('/propcard/privileges/butie.json',{
					id : id
				},true).then( res => {
					if(res.code === 200){
						this.rivilege = res.data
					}
				})
			},
			//提交数据
			submitVal(type){
				//没有输入服务号
				if(!this.hasServer && type == '0'){
					this.hasNum    = true
					this.noNum = '请输入正确的账号'
						setTimeout( () => {
							this.hasNum    = false
						},2000)
					return
				}
				//服务号不存在
				if(type == '0' && !this.fuid){
					this.hasNum    = true
					this.noNum = '请输入正确的账号'
						setTimeout( () => {
							this.hasNum    = false
						},2000)
					return
				}
				if(type == '0'){
					this.info.fuid = this.fuid
				}
				if(type != '0'){
					delete this.info.fuid
				}
				let url = ''
				if(this.from === 'setting'){
					url = '/api/Store/getStore'
				}else if(this.from === 'create'){
					url = '/api/Store/getStore'
				}else if(this.from === 'media' || this.from === 'onlinestore'){
					url = '/api/onlinestore/releaseDemand'
				}else if(this.from === 'self'){
					url = '/api/onlinestore/storeApply'
				}
				this.$vux.loading.show({
        			text: '正在提交'
      			})
				this.$axiosPost(url,{
					data : JSON.stringify(this.info)
				}).then( res => {
					this.$vux.loading.hide()
					if(res.code == 200){						
						let id = this.$route.query.status
						this.$router.replace({path:'/examine',query:{status:0,fromin:this.from}})
					}					
				})	
			},
			//是不是微信
			isWeChat(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			    	document.title = '选择专属宝店客'
			       	this.isWeiXin = true
			    }else{
			    	this.isWeiXin = false
			    }
			},
		}
	}
</script>

<style lang="less" scoped>
	@comColor:#fe1a57;
	.server-num{
		color:#404a50;
		text-align: left;
		background: #fff;
		.header{
			padding-top: .7rem;
			padding-bottom: .26rem;
			text-align: center;			
			h3{
				font-size: .44rem;
			}
		}
		.h-desc{
			padding: 0 .5rem;
			text-align: center;
			line-height: .34rem;
			font-size: .22rem;
		}
		.search{
			position: relative;
			padding: .39rem .42rem;
			.search-ipt{
				input{
					overflow: hidden;
					padding-left: .1rem;
					border: none;
					outline: none;
					width: 100%;
					height: .72rem;
					border:1px solid #999999;
					border-radius: .12rem;
				}
			}
			.search-btn{
				position: absolute;
				right: .44rem;
				top: .41rem;
				width: 1.1rem;
				height: .68rem;
				border-left:1px solid #999999;
				background: #e1dedf;
				line-height: .72rem;
				text-align: center;
				color: #fff;
				font-size: .26rem;
				border-radius:0 .12rem .12rem 0;
			}
			.no-key{
				right: .39rem;
				top: .39rem;
				height: .72rem;
				border: none;
				background:  @comColor;			
			}

		}
		.con-title{	
			position: relative;	
			padding-top: .6rem;	
			padding-left: .4rem;
			background: #f2f2f2;
			font-size: .34rem;
			font-weight: 500;	
			.triangle_border_down{
				position:absolute;
				left: .4rem;
				top: 0;
			    width:0;
			    height:0;
			    border-width:.2rem .2rem 0;
			    border-style:solid;
			    border-color:#fff transparent transparent;/*灰 透明 透明 */				   
			}
			}
		.content{
			padding-left: .4rem;
			background: #f2f2f2;
			.user-info,.item-info{
				position: relative;
				padding-top: .4rem;
				display: flex;
				.image{

					height: .5rem;
					width: .9rem;
				}
				.image-one{
					height: 1.3rem;
					width: 1.3rem;
					font-size: .28rem;
					line-height: .6rem;
				}
				.avatar{
					display: flex;
					flex-direction: column;
					justify-content: center;
					overflow: hidden;
					width: 1.4rem;
					height: 1.4rem;
					border-radius: 50%;
				}
				.info{
					margin-left: .2rem;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.desc{
						line-height: .44rem;
						font-size: .24rem;
					}
				}
				.contact-btn{
					position: absolute;
					top: .23rem;
					right: .3rem;
					width: 1.5rem;
					height: .6rem;
					text-align: center;
					line-height: .6rem;
					color: @comColor;
					border-radius: .06rem;
				}
			}
			.item-info{
				margin: 0;
				padding: .3rem 0;
			}
			.desc-title{
				margin-top: .4rem;
				line-height: .4rem;
			}
		}
		.footer{
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 1.2rem;
			background: #fff;
			.item{
				flex: 1;
				height: .7rem;
				margin-top: .25rem;
				text-align:center;
				line-height: .7rem;
			}
			.item2{
				color: @comColor;
			}
		}
		.no-num{
			padding-left: .36rem;
			z-index: 999;
			position: fixed;
			top: 0;
			display: flex;
			align-items: center;
			width: 100%;
			height: 1rem;
			line-height: 1rem;
			color: #fff;
			font-size: .32rem;
			background: rgba(255,3,46,.85);
			.no-icon{
				margin-right:.17rem;
				width: .48rem;
				height: .48rem;
			}

		}
	}
</style>